<!--<script setup>-->
<!--import { ref, onMounted } from 'vue'-->
<!--import { useRoute, useRouter } from 'vue-router'-->
<!--import { useCaseStore } from '@/stores/caseStore'-->
<!--import { ElMessage } from "element-plus";-->

<!--const route = useRoute()-->
<!--const router = useRouter()-->
<!--const caseStore = useCaseStore()-->

<!--const form = ref({-->
<!--  caseName: '',-->
<!--  caseType: '',-->
<!--  applicant: '',-->
<!--  phone: '',-->
<!--  address: '',-->
<!--  description: '',-->
<!--  status: ''-->
<!--})-->

<!--onMounted(async () => {-->
<!--  const id = route.params.id-->
<!--  await caseStore.fetchCaseDetail(id)-->
<!--  const currentCase = caseStore.currentCase-->
<!--  if (currentCase) {-->
<!--    form.value = { ...currentCase }-->
<!--  }-->
<!--})-->

<!--const handleSave = async () => {-->
<!--  try {-->
<!--    await caseStore.updateCase(form.value.id, form.value)-->
<!--    ElMessage.success('保存成功')-->
<!--    router.push('api/case/status')-->
<!--  } catch (err) {-->
<!--    ElMessage.error('保存失败')-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<template>-->
<!--  <el-button size="small" @click="router.back()"> 返回</el-button>-->
<!--  <div class="edit-container">-->
<!--    <h2>编辑案件</h2>-->
<!--    <el-form :model="form" label-width="120px">-->
<!--      <el-form-item label="案件名称">-->
<!--        <el-input v-model="form.caseName" />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="申请人">-->
<!--        <el-input v-model="form.realName" />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="联系电话">-->
<!--        <el-input v-model="form.phone" />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="地址">-->
<!--        <el-input v-model="form.address" />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="案件类型">-->
<!--        <el-select v-model="form.caseType" placeholder="请选择案件类型">-->
<!--          <el-option label="民事案件" value="civil" />-->
<!--          <el-option label="刑事案件" value="criminal" />-->
<!--          <el-option label="行政案件" value="administrative" />-->
<!--          <el-option label="商事案件" value="commercial" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="状态">-->
<!--        <el-select v-model="form.status" placeholder="请选择状态">-->
<!--          <el-option label="草稿" value="draft" />-->
<!--          <el-option label="审核中" value="reviewing" />-->
<!--          <el-option label="已通过" value="approved" />-->
<!--          <el-option label="已拒绝" value="rejected" />-->
<!--          <el-option label="处理中" value="processing" />-->
<!--          <el-option label="已完成" value="completed" />-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="描述">-->
<!--        <el-input v-model="form.description" type="textarea" rows="4" />-->
<!--      </el-form-item>-->

<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="handleSave">保存</el-button>-->
<!--        <el-button @click="router.back()">取消</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--  </div>-->
<!--</template>-->

<!--<style scoped>-->
<!--.edit-container {-->
<!--  padding: 20px;-->
<!--  max-width: 600px;-->
<!--  margin: auto;-->
<!--}-->
<!--</style>-->

<!-- src/views/case/CaseEdit.vue -->
<script setup>
import { ref, reactive } from 'vue';
import { useCaseStore } from '@/stores/caseStore.js';
import { ElMessage } from "element-plus";

const caseStore = useCaseStore();

const dialogVisible = ref(false);

const form = reactive({
  id: '',
  caseName: '',
  caseType: '',
  realName: '',
  phone: '',
  address: '',
  description: '',
  status: ''
});

const rules = {
  caseName: [{ required: true, message: '请输入案件名称', trigger: 'blur' }],
  caseType: [{ required: true, message: '请选择案件类型', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
};

const caseForm = ref(null);

const show = (caseInfo) => {
  Object.assign(form, caseInfo);
  form.id = caseInfo.id;
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
};

const handleSave = () => {
  caseForm.value?.validate().then(async () => {
    try {
      await caseStore.updateCase(form.id, { ...form });
      ElMessage.success('保存成功');
      dialogVisible.value = false;
      // 如果需要刷新列表，可以触发一个事件或者调用回调
    } catch (err) {
      ElMessage.error('保存失败');
    }
  }).catch(() => {
    ElMessage.warning('请检查表单填写是否正确');
  });
};

// 对外暴露方法
defineExpose({
  show
});
</script>

<template>
  <el-dialog
      title="编辑案件"
      v-model="dialogVisible"
      width="50%"
      @close="handleClose"
  >
    <el-form :model="form" :rules="rules" ref="caseForm" label-width="120px">
      <el-form-item label="案件名称" prop="caseName">
        <el-input v-model="form.caseName" />
      </el-form-item>

      <el-form-item label="申请人">
        <el-input v-model="form.realName" />
      </el-form-item>

      <el-form-item label="联系电话">
        <el-input v-model="form.phone" />
      </el-form-item>

      <el-form-item label="地址">
        <el-input v-model="form.address" />
      </el-form-item>

      <el-form-item label="案件类型" prop="caseType">
        <el-select v-model="form.caseType" placeholder="请选择案件类型">
          <el-option label="民事案件" value="1" />
          <el-option label="刑事案件" value="2" />
          <el-option label="行政案件" value="3" />
          <el-option label="商事案件" value="4" />
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option label="草稿" value="draft" />
          <el-option label="审核中" value="reviewing" />
          <el-option label="已通过" value="approved" />
          <el-option label="已拒绝" value="rejected" />
          <el-option label="处理中" value="processing" />
          <el-option label="已完成" value="completed" />
        </el-select>
      </el-form-item>

      <el-form-item label="描述">
        <el-input v-model="form.description" type="textarea" rows="4" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>
</style>
